import React from 'react'
import { TabBar } from 'antd-mobile'
import {NavLink} from 'react-router-dom'
import './tabbar.less'

export default class TabBarExample extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			selectedTab: 'redTab',
			hidden: false,
			fullScreen: true,
		}
	}
	renderContent(pageText) {
		switch (pageText) {
			case 'Life':
				return (
					<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
					  <div style={{ paddingTop: 50 }}>生活界面内容</div>
					</div>
				  );
			case 'Koubei':
				return (
					<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
						<div style={{ paddingTop: 50 }}>口碑界面内容</div>
					</div>
					);
			case 'Friend':
				return (
					<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
						<div style={{ paddingTop: 50 }}>朋友界面内容</div>
					</div>
					);
			case 'My':
				return (
					<div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
						<div style={{ paddingTop: 50 }}>
							<NavLink exact to="/login" className='goBack' activeStyle={{
								fontWeight: 'bold'
								}}>退出登陆</NavLink></div>
					</div>
					);
			default:
				break
		}
		
	  }
	  
	render() {
		return (
			<div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
				<TabBar unselectedTintColor="#949494" tintColor="#33A3F4" barTintColor="white" hidden={this.state.hidden}>
					<TabBar.Item
						title="life"
						key="Life"
						icon={
							<div
								style={{ 
									width: '22px',
									height: '22px',
									background:
										'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat',
								}}
							/>
						}
						selectedIcon={
							<div
								style={{
									width: '22px',
									height: '22px',
									background:
										'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat',
								}}
							/>
						}
						selected={this.state.selectedTab === 'blueTab'}
						badge={2}
						onPress={() => {
							this.setState({
								selectedTab: 'blueTab',
							})
						}}
						data-seed="logId"
					>
						{this.renderContent('Life')}
					</TabBar.Item>
					<TabBar.Item
						icon={
							<div
								style={{
									width: '22px',
									height: '22px',
									background:
										'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat',
								}}
							/>
						}
						selectedIcon={
							<div
								style={{
									width: '22px',
									height: '22px',
									background:
										'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat',
								}}
							/>
						}
						title="Koubei"
						key="Koubei"
						badge={23}
						selected={this.state.selectedTab === 'redTab'}
						onPress={() => {
							this.setState({
								selectedTab: 'redTab',
							})
						}}
						data-seed="logId1"
					>
						{this.renderContent('Koubei')}
					</TabBar.Item>
					<TabBar.Item
						icon={
							<div
								style={{
									width: '22px',
									height: '22px',
									background:
										'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat',
								}}
							/>
						}
						selectedIcon={
							<div
								style={{
									width: '22px',
									height: '22px',
									background:
										'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat',
								}}
							/>
						}
						title="Friend"
						key="Friend"
						dot
						selected={this.state.selectedTab === 'greenTab'}
						onPress={() => {
							this.setState({
								selectedTab: 'greenTab',
							})
						}}
					>
						{this.renderContent('Friend')}
					</TabBar.Item>
					<TabBar.Item
						icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg' }}
						selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
						title="My"
						key="my"
						selected={this.state.selectedTab === 'yellowTab'}
						onPress={() => {
							this.setState({
								selectedTab: 'yellowTab',
							})
						}}
					>
						{this.renderContent('My')}
					</TabBar.Item>
				</TabBar>
			</div>
		)
	}
}
